<template>
  <div>
    <!--li drag 是拖拽事件-->
    <ul>
      <li draggable="true" @dragstart.stop="handleDragStart($event)"
          @dragenter="handleDragEnter" @dragleave="handleDragLeave"
          @dragover.prevent="handleDragOver" @drop.stop="handleDrop($event)" @dragend.prevent="handleDragEnd"
          class="nodeLi">
        <!--滑过节点显示功能点-->
        <div @mouseenter="showOprators" @mouseleave="hideOprators" class="columns" style="width: 220px">
          <div class="column">
            <a @click="toggle">
              <oolongIcon :type="open?'android-arrow-dropdown-circle':'android-arrow-dropright-circle'" size="30" v-if="isFolder"></oolongIcon>
            </a>
          </div>
          <div class="column">
            <a @click="editNode">
              <oolongIcon type="compose" size="30"></oolongIcon>
            </a>
          </div>
          <div class="column nodeName">
            <a @dblclick="showDetail()" v-if="showInput">{{node.name}}</a>
            <input type="text" v-model="node.name" @keyup.enter="editorName" v-else />
          </div>
          <div class="column" v-show="node.showSelect">
            <input type="checkbox" v-model="node.selectCheck" @change="selectCh" :id="node.id"/>
            <input type="checkbox" v-model="node.selectDo" @change="selectDo" :id="node.id"/>
          </div>
          <div class="column">
            <div class="columns" v-show="node.addNoBtn">
              <div class="column">
                <a @click="addSonNode">
                  <oolongIcon type="plus-circled" size="30"></oolongIcon>
                </a>
              </div>
              <div class="column">
                <a @click="removeNode">
                  <oolongIcon type="trash-a" size="30"></oolongIcon>
                </a>
              </div>
            </div>
          </div>
        </div>
        <!--子节点的内容-->
        <ul v-show="open" v-if="isFolder">
          <tree-node v-for="nodeNode in node.menuChild" :tree-node="nodeNode" :key="nodeNode.id"
                     @passNode="accNode"></tree-node>
        </ul>
      </li>
    </ul>
  </div>
</template>
<style lang="scss">

  .nodeLi {
    margin: 10px 0 0 44px;
    a {
      color: #B377A5;
      :hover{
        color: #8391a5;
      }
    }
  }

  .nodeName {
    font-size: 20px;
  }


</style>
<script>
  export default{
    data: function () {
      return {
        showInput: true,
        show_oprators: false,
        is_draged: false,
        open: false,
        node: {}
      }
    },
    name: 'tree-node',
    props: {
      treeNode: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    //计算属性 判断节点是否展开
    computed: {
      isFolder: function () {
        return this.node.menuChild && this.node.menuChild.length
      },
    },
    mounted(){
      this.node = this.dealWithData(this.treeNode);
    },
    methods: {

      //元素被放到了放置目标中触发
      handleDrop: function (e) {
        var vm = window.__drop_node__;
        this.$el.style.backgroundColor = '';
        vm.$el.style.backgroundColor = '';

        var __parent__ = this;
        while (__parent__ !== undefined) {
          if (__parent__ === vm) {
            return;
          }
          __parent__ = __parent__.$parent;
        }

        var current_node = vm.node;
        //console.log(JSON.stringify(vm.$parent.node.menuChild))
        vm.$parent.node.menuChild = vm.$parent.node.menuChild.filter(function (node) {
          //console.log(JSON.stringify(node))
          //console.log(JSON.stringify(current_node))
          //alert(node !== current_node)
          return node !== current_node;
        });
        //console.log(JSON.stringify(current_node))
        //console.log(JSON.stringify(this.node))
        current_node.pid = this.node.id;
        this.node.menuChild.push(current_node);
        var jsonNode = {bool: true, handleDrop: true, node: this.node};
        this.$emit("passNode", jsonNode)
      },
      //当拖动停止时，会触发事件
      handleDragEnd: function () {
        this.$el.style.backgroundColor = '';
      },
      // 按下鼠标键并开始移动鼠标时执行
      handleDragStart: function (e) {
        this.show = false;
        this.is_draged = true;
        window.__drop_node__ = this;
        this.$el.style.backgroundColor = 'yellow';
      },
      //有元素被拖动到放置目标上执行
      handleDragEnter: function () {
        if (!this.is_draged) this.$el.style.backgroundColor = "grey";
      },
      //在元素被拖出放置目标时触发
      handleDragLeave: function () {
        if (!this.is_draged) this.$el.style.backgroundColor = "";
      },
      //在被拖动的元素还在放置目标范围内移动时，会持续触发
      handleDragOver: function () {
      },

      showOprators: function () {
        this.show_oprators = true;
      },
      hideOprators: function () {
        this.show_oprators = false;
      },
      accNode(node){
        this.$emit("passNode", node)
//        console.log(JSON.stringify(node))
      },
      editorName(){
        var jsonNode = {bool: true, editorName: true, node: this.node};
//        console.log(JSON.stringify(jsonNode))
        this.$emit("passNode", jsonNode)
        this.showInput = true;
      },
      selectCh(){
        var jsonNode = {bool: true, selectCh: true, node: this.node};
        this.$emit("passNode", jsonNode)
      },
      selectDo(){
        var jsonNode = {bool: true, selectDo: true, node: this.node};
        this.$emit("passNode", jsonNode)
      },
      //添加节点事件
      addNode: function () {
        var jsonNode = {bool: true, addSon: true, node: this.node};
        this.$emit("passNode", jsonNode)

      },
      //添加兄弟节点事件
      addBrotherNode(){
        var jsonNode = {bool: true, addBro: true, node: this.node};
        this.$emit("passNode", jsonNode)
      },
      //添加兄弟节点事件
      addBrotherNode1(){
//        console.log(JSON.stringify(this.node))
        var jsonNode = {bool: true, addBro: true, node: this.node};
        this.$emit("passNode", jsonNode)
      },
      //添加节点事件
      removeNode: function () {
        if (confirm('Do you want to remove node: ' + this.node.name)) {
          var current_node = this.node;
          this.$parent.node.menuChild = this.$parent.node.menuChild.filter(function (node) {
            return node !== current_node;
          });
        }
        this.$emit("passNode", this.node)
      },
      addSonNode: function () {
        var name = prompt("Input the name of new node", "new node");
        if (!!name && !!name.trim()) {
          this.node.menuChild.push({name: name.trim(), isCheck: false, menuChild: []});
        }
        if (!this.open) {
          this.open = !this.open
        }
        this.$emit("passNode", this.node)

      },
      //编辑节点事件
      editNode: function () {
        var name = prompt("Input the name of new node", this.node.name);
        if (!!name && !!name.trim()) {
          this.node.name = name.trim();
          this.$emit("passNode", this.node)

        }
      },
      //双击展开节点事件
      toggle: function () {
        if (this.isFolder) {
          console.log(this.isFolder)
          this.open = !this.open
        }
      },
      //单选框点击事件
      selectCheck(){
        var current_isCheck = this.node.isCheck;
        if (!current_isCheck) {
          this.selectFn(this.node);
          this.$emit("passNode", this.node)
        } else if (current_isCheck) {
          this.selectFn(this.node);
          this.$emit("passNode", this.node)
        }
        this.selectNoAll(this);
        this.selectParent(this);
        this.$emit("passNode", this.node)
      },
      //单选框全选全不选事件
      selectFn(obj){
        //alert(JSON.stringify(obj))
        if (obj instanceof Object) {
          if (obj.menuChild && obj.menuChild.length) {
            for (var i = 0, len = obj.menuChild.length; i < len; i++) {
              if (obj.isCheck) {
                obj.menuChild[i].isCheck = true;
              } else {
                obj.menuChild[i].isCheck = false;
              }
              this.selectFn(obj.menuChild[i]);
            }
          }
        }
      },
      //单选框不全选父节点则不选事件
      selectNoAll(obj){
        //console.log(obj.node)
        if (obj.node.pid != '0') {
          if (obj.node.isCheck == false) {
            obj.$parent.node.isCheck = false;
            this.selectNoAll(obj.$parent);
          } else {
            return;
          }
        }
      },
      //子节点单选框全选父节选中事件
      selectParent(obj){
        //console.log(obj)
        if (obj.node.pid != '0') {
          var i = 0;
          if (obj.node.isCheck == true) {
            while (obj.$parent.node.menuChild[i].isCheck == true) {
              i++;
              //console.log("obj.node.menuChild.length="+obj.$parent.node.menuChild.length)
              if (i == obj.$parent.node.menuChild.length) {
                obj.$parent.node.isCheck = true;
                i = 0;
                //console.log(JSON.stringify(obj.$parent.node))
                this.selectParent(obj.$parent);
                return;
              }
            }
          }
        }
      },
      //双击事件点击传输节点数据
      showDetail() {
        this.showInput = false;
      },
      dealWithData(obj){
        console.log(JSON.stringify(obj))
        if (obj instanceof Object) {
          if (!obj.isCheck) {
            obj["isCheck"] = false;
          }
          if (!obj.showSelect) {
            obj["showSelect"] = false;
          }
          if (!obj.selectCheck) {
            obj["selectCheck"] = false;
          }
          if (!obj.selectDo) {
            obj["selectDo"] = false;
          }
          if (!obj.addNoBtn) {
            obj["addNoBtn"] = true;
          }
          if (obj.menuChild && obj.menuChild.length) {
            for (var i = 0; i < obj.menuChild.length; i++) {
              this.dealWithData(obj.menuChild[i]);
            }
          }
        }
        return obj;
      }
    }
  }
</script>
